<template>
  <div>
     <div class="box" ref="boxRef">
      {{ point.x }},{{point.y}}
     </div>
  </div>
</template>

<script lang='ts' setup>
import useMouse from '@/hooks/useMouse'
import {onUpdated,ref} from 'vue'
const point=useMouse()
const boxRef=ref<HTMLElement>()
onUpdated(()=>{
    (boxRef.value as HTMLElement).style.left=(point.x-(boxRef.value as HTMLElement).offsetWidth/2)+"px";
    (boxRef.value as HTMLElement).style.top=(point.y-(boxRef.value as HTMLElement).offsetHeight/2)+"px";
    
})
</script>

<style lang='scss' scoped>
  .box{
    position:absolute;
    left: 50px;
    top: 50px;
    width: 80px;
    height: 80px;
    background: linear-gradient(red,yellow);
    border-radius:50%;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
  }
</style>